<template>
  <view class="page">
    <view class="head_box">
      <!-- tab -->
      <view class="order-nav u-flex">
        <view class="nav-item u-flex-col u-flex-1 u-col-center" v-for="nav in orderState" :key="nav.id" @tap="onNav(nav.type,nav.id)">
          <view class="item-title">{{ nav.title }}</view>
          <text class="nav-line" :class="{ 'line-active': orderType === nav.type }"></text>
        </view>
      </view>
    </view>
    <view class="plan plan_content">
      <scroll-view enable-back-to-top @scrolltolower="loadMore"   scroll-y="true" class="category-tabs-wrap">
        <view v-for="(item,index) in planList" :key="index">
          <view class="card">
            <view class="content">
              <view class="content-item"><text class="content-label">姓名:&nbsp;&nbsp;</text>
                {{ item.username }}</view>
              <view class="content-item"><text class="content-label">电话:&nbsp;&nbsp;</text>
                {{ item.mobile }}</view>
              <view class="content-item"><text class="content-label">预约门店:&nbsp;&nbsp;</text>
                {{ item.shop_name }}</view>
              <view class="content-item"><text class="content-label">预约时间:&nbsp;&nbsp;</text>
                <text>{{ item.serve_time_text }}</text></view>
              <view class="content-item"><text class="content-label">预约状态:&nbsp;&nbsp;</text>
                {{ item.state_text }}</view>
              <view class="content-item" v-if="state=='2'&&item.state=='2'&&item.is_commet=='1'"><text class="content-label">评价内容:&nbsp;&nbsp;</text>
               <text style="flex: 3.4;">{{ item.commet }}</text></view>
              <view class="content-item" v-if="state=='2'&&item.state=='2'&&item.is_commet=='1'"><text class="content-label">评价时间:&nbsp;&nbsp;</text>
                {{ item.commet_time_text }}</view>
              <view class="btns" style="margin-top:10px">
                <view class="btn edit_btn" plain v-if="item.state=='1'" @click="toaddplan(item.id,item.serve_id)">编辑</view>
                <view class="btn" type="primary" v-if="item.state=='1'" @click="delplanone(item.id)">取消</view>
                <view class="btn" type="primary" v-if="item.state=='2'&&item.is_commet=='0'" @click="goAppraise(item.id)">去评价</view>
              </view>
            </view>
          </view>
        </view>
        <view class="x-c" style="width: 100%;">
          <!-- 缺省页 -->
          <shopro-empty v-if="isEmpty" marginTop="200rpx"
                        tipText="暂无预约记录~"></shopro-empty>
          <!-- 更多 -->
          <u-loadmore v-show="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#d4d4d4" />
        </view>
      </scroll-view>
    </view>
<!--    <view class="addplan" @click="toaddplan('')">-->
<!--      <text class="u-iconfont uicon-plus add-icon" style="color:#fff;"></text>-->
<!--      <view class="add-wenzi">添加预约</view>-->
<!--    </view>-->
  </view>
</template>

<script>
export default {
  data(){
    return {
      fileList1: [],
      files: null,
      fileName: null,
      show_files: false,
      planList:[],
      token:uni.getStorageSync('token')||'',
      activeStyle: {
        color: '#4871c0'
      },
      inactiveStyle:{
        color: '#8b8b8b'
      },
      avatar: {
        url: 'https://cdn.uviewui.com/uview/album/1.jpg'
      },
      serve_id:'',
      lastPage:1,
      loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
      currentPage: 1,
      isEmpty: false,
      orderState: [
        {
          id: 0,
          title: '已预约',
          type: 'all'
        },
        {
          id: 1,
          title: '已完成',
          type: 'nopay'
        },
        {
          id: 2,
          title: '服务评价',
          type: 'nocomment'
        }
      ],
      orderType: 'all',
      state:0
    }
  },
  onLoad() {
    // this.options = this.$Route.query;
    // this.serve_id = this.options.serve_id;
    // this.getplanAlllist()
  },
  onShow(){
    this.options = this.$Route.query;
    this.serve_id = this.options.serve_id;
    this.currentPage = '1'
    this.getplanAlllist()
  },
  methods: {
    // tab切换
    onNav(type,id) {
      if (this.orderType !== type) {
        this.orderType = type;
        this.planList = [];
        this.currentPage = 1;
        this.lastPage = 1;
        this.state = id
        this.getplanAlllist();
      }
    },
    goAppraise(id){
      uni.navigateTo({
        url: '/pages/app/coupon/serve-comment?serve_list_id='+id+'&serve_id='+this.serve_id,
      });
    },
    toaddplan(id,serve_id){
      uni.navigateTo({
        url: '/pages/app/coupon/serveCardUse?serve_list_id='+id+'&serve_id='+serve_id,
      });
    },
    loadMore(){
      var that = this;
      if (that.currentPage < that.lastPage) {
        that.currentPage += 1;
        that.getplanAlllist();
      }
    },
    getplanAlllist(){
      var that = this;
      let params = {
        token:that.token,
        page:this.currentPage,
        status :this.state
      }
      that.$https('coupons.serveuselist',params).then(res => {
        this.isLoading = false;
        console.log(res)
        if(res.code == 1){
          if (that.currentPage == '1') {
            that.planList = [];
          }
          that.planList = [...that.planList, ...res.data.data];
          that.isEmpty = !that.planList.length;
          that.lastPage = res.data.last_page;
          that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
        }
      })
    },
    delplanone(id){
      var that = this;
      let params = {
        token:this.token,
        id:id
      }
      uni.showModal({
        title: '取消服务订单',
        content: '确定要取消这个订单么？',
        cancelText: '取消',
        confirmText: '确认',
        success: res => {
          if (res.confirm) {
            that.$https('coupons.delserve',params).then(res => {
              this.isLoading = false;
              console.log(res)
              if(res.code == 1){
                that.$u.toast('取消成功')
                that.getplanAlllist()
              }
            })
          }
        }
      });
    },
  }
}
</script>

<style lang="scss" scoped>
$font-color: #4871c0;
.page {
  background: #F8F8F8;
  .order-nav {
    background: #fff;
    height: 80rpx;

    .nav-item {
      flex: 1;

      .item-title {
        font-size: 30rpx;

        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 76rpx;
      }

      .nav-line {
        width: 100rpx;
        height: 4rpx;
        background: #fff;
      }

      .line-active {
        background: rgba(0, 0, 0, 1);
      }
    }
  }

  .tabs {
    align-items: center;
    /deep/.u-tabs__wrapper {
      width: 100%;
    }
  }
  .feedback {
    .collapse {
      /deep/.u-collapse-item__content__text {
        padding: 0;
      }
      /deep/.u-divider {
        margin: 8px 0;
      }
      .label {
        color: $font-color;
        padding: 8px 12px;
        background-color: #F1F6FF;
      }
      .head {
        font-weight: bold;
        font-size: 15px;
        margin: 12px;
      }
      .content {
        display: contents;
        * {
          margin: 5px 10px;
          color: #666;
        }
      }
    }
  }
  .plan {
    padding:0 15px 15px;
    .date {
      background: transparent!important;
      height: auto!important;
    }
    .card {
      border-radius: 10px;
      margin: 20px 0;
      padding: 10px;
      background-color: #FFFFFF;
      .account {
        display: inline-flex;
        align-items: center;
        margin-bottom: 10px;
        .name {
          margin-left: 10px;
        }
      }
      .content {
        display: contents;
        .content-item{
          margin-top: 10rpx;
          letter-spacing: 2rpx;
          display: flex;
          .content-label{
            color:#ccc;
            letter-spacing: 4rpx;
            margin-right: 16rpx;
          }
        }
        * {
          line-height: 30px;
          .content-label {
            color: #8b8b8b;
            margin-right: 8px;
          }
          .attach {
            padding: 8px;
            background-color: #ebf2fd;
            /deep/ .u-text__prefix-icon{
              margin-right: 8px;
              color: #4871C0 !important;
            }
            /deep/.u-text__value{
              width: 100%;
              overflow: hidden;/*超出部分隐藏*/
            }
            /deep/.u-text__value>span{
              width: 100%;
              overflow: hidden;/*超出部分隐藏*/
              white-space: nowrap;/*不换行*/
              text-overflow:ellipsis;
            }
          }
        }
        .image {
          display: inline-flex;
          * {
            margin-right: 10px;
          }
        }
      }
      .btns {
        display: flex;
        width: fit-content;
        margin-left: auto;
        .btn {
          margin-left: 20rpx;
          border-radius: 60rpx;
          padding: 10rpx 40rpx;
          background: #333333;
          color: #fff;
          border: 2rpx solid #333;
        }
        .edit_btn{
          background: #fff;
          color:#333;
          border: 2rpx solid #333;
        }
      }
    }
  }
}

.department {
  width: 100%;
  height: 108rpx;
  line-height: 108rpx;
  color: #333;
}
.department-name {
  margin-left: 30rpx;
}
.department .right{
  width: 100rpx;
  height: 100%;
}

.week-work-settle {
  height: 52px;
  line-height: 52px;
  background-color: #F9F9F9;
  color: #999;
  padding-left: 30rpx;
}
.addplan{
  position: fixed;
  bottom: 40px;
  right: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .add-icon{
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 30rpx;
    background: #000000;
    margin-bottom: 10rpx;
  }
}
/deep/.u-text{
  width: 96% !important;
}
.content-box {
  width: calc(100vw - 56rpx);
  min-height: 92rpx;
  background-color: #f8f8f8;
  border-radius: 8px 8px 8px 8px
}

.red{
  color: #ff4949;
}
.plan_content{
  height:  calc(100vh - 120px);
  overflow-y: scroll;
}
.plan_content_week{
  height:  calc(100vh - 84px);
  overflow-y: scroll;
}
.changsuo_content{
  height: 50vh;
  overflow-y: scroll;
}
</style>
